<!--
 * @Description:登录页
 * @Author: gaoyunpeng
 * @Date: 2021-12-28 10:28:10
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="login-container" :style="cssStyle">
    <!-- 顶部样式布局 -->
    <div class="login-box">
      <p>{{ title }}</p>
      <el-form ref="form" :model="form">
        <el-form-item :rules="ruleValidate('用户名不能为空')" prop="loginName">
          <el-input
            v-model="form.loginName"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
            style="width: 14vw"
          ></el-input>
        </el-form-item>
        <el-form-item :rules="ruleValidate('密码不能为空')" prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-s-goods"
            placeholder="请输入密码"
            style="width: 14vw"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item :rules="ruleValidate('验证码不能为空')" prop="identify">
          <el-input
            v-model="form.identify"
            placeholder="请输入验证码"
            style="width: 6.7vw"
          ></el-input>
          <div class="identify-box" @click="changeCode()">
            <Identify :identifyCode="identifyCode"></Identify>
          </div>
        </el-form-item>
      </el-form>
      <el-button @click="handleSubmit" type="primary">登录</el-button>
    </div>
    <!-- 动效 -->
    <bgAnimation></bgAnimation>
  </div>
</template>

<script>
import Identify from '@/components/identify/index.vue'
// 背景动态效果
import bgAnimation from '@/components/bgAnimation/index.vue'
import { title, loginPicture } from '@/settings'
// 导入api
import * as api from '@/api/user.js'
// 导入加密方法
import { setEncrypt } from '@/utils/rsa.js'
export default {
  components: {
    Identify,
    bgAnimation
  },
  name: 'Login',
  data() {
    return {
      title,
      identifyCode: 'm6a8',
      identifyCodes: '123456789abcdefghijklmnopqrstuvwxyz',
      form: {
        loginName: 'admin',
        password: '123123',
        identify: ''
      }
    }
  },
  computed: {
    identify() {
      return this.form.identify
    },
    cssStyle() {
      return {
        background: `url(${loginPicture}) no-repeat`,
        backgroundSize: '100% 100%'
      }
    }
  },
  watch: {
    // 判断验证码是否正确
    identify(newVal) {
      if (newVal.length === 4) {
        if (
          this.form.identify.toUpperCase() !== this.identifyCode.toUpperCase()
        ) {
          return this.changeCode() || this.$message.error('验证码错误')
        }
      }
    },
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 点击验证码刷新验证码
    changeCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
    randomNum(min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode(data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    },
    // 验证非空
    ruleValidate(text) {
      return { required: true, message: text, trigger: 'blur' }
    },

    // 提交的表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (
            this.form.identify.toUpperCase() !== this.identifyCode.toUpperCase()
          ) {
            this.$message.error('验证码错误')
            this.changeCode()
          } else {
            // 模拟的token，利用fastmock
            const res = await api.login({
              username: this.form.loginName,
              password: setEncrypt(this.form.password) // 加密的密码串
            })
            // 加密的密码串
            console.log(setEncrypt(this.form.password))
            sessionStorage.setItem('tokenValue', res.data.userInfo.token)
            this.$message.success('登录成功')
            this.$router.push({ path: '/choose-template' })
          }
        }
      })
    }
  },
  mounted() {
    // 刷新页面就生成随机验证码
    this.identifyCode = ''

    this.makeCode(this.identifyCodes, 4)
  }
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  .login-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 500px;
    background: url('~@/assets/images/login/login.png') no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    p {
      font-size: 38px;
      color: #fff;
      letter-spacing: 3px;
      margin-bottom: 40px;
    }
    button {
      width: 270px;
      height: 50px;
      color: #fff;
      background: linear-gradient(0deg, #11c4ef 0%, #17b2bf 100%);
      border: 1px solid #5dcace;
    }
    .identify-box {
      width: 130px;
      height: 40px;
      margin-left: 0.5vw;
    }
  }
}
::v-deep .el-form-item__content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
</style>
